<template>
    <div class="big-seamless-scroll">
        <div ref="listRef" class="big-seamless-scroll-list">
            <slot />
        </div>
    </div>
</template>

<script setup lang="ts">
import { PropType, ref } from 'vue';
import { useSeamlessScroll, OptionsType } from '../../../hooks/use-seamless-scroll';

const props = defineProps({
    width: {
        type: [String, Number]
    },
    height: {
        type: [String, Number]
    },
    option: {
        type: Object as PropType<OptionsType>,
        default: () => ({})
    }
});
const listRef = ref();
const { pause, play } = useSeamlessScroll(listRef, props.option);

defineExpose({
    pause,
    play
});
</script>

<style lang="scss" scoped>
.big-seamless-scroll {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
</style>
